<template>
  <div style="height: 100%;padding-top: 5px;">
    <div class="manage_left l_left">
      <div class="manage_line1">
        <div class="manage_line2">
          <div class="manage_top_middle">
            <table class="table table-bordered" style="border-collapse: collapse;width: 100%">
              <tbody>
              <tr>
                <td>劳务人员总数</td>
                <td colspan="3">25414人</td>
              </tr>
              <tr>
                <td>登记方式</td>
                <td colspan="3">实名登记</td>
              </tr>
              <tr>
                <td>工资发放总人数</td>
                <td colspan="3">25414人</td>
              </tr>
              <tr>
                <td>男性劳务工</td>
                <td>20229人</td>
                <td>女性劳务工</td>
                <td>5185人</td>
              </tr>
              <tr>
                <td>男性劳务工平均工资</td>
                <td>7424元</td>
                <td>女性劳务工平均工资</td>
                <td>5457元</td>
              </tr>
              <tr>
                <td>工资发放比例</td>
                <td>100%</td>
                <td>欠薪比例</td>
                <td>0%</td>
              </tr>
              </tbody>
            </table>
            <p>劳务工数据汇总</p>
          </div>
          <div class="manage_left_top">
            <div class="manage_top_left l_left">
              <div id="container2" style="height: 90%"></div>
              <p>劳务工性别分析</p>
            </div>
            <div class="manage_top_left l_left">
              <div id="container1" style="height: 90%"></div>
              <p>劳务工种分析</p>
            </div>
            <div class="manage_top_left l_left">
              <div id="container3" style="height:90%"></div>
              <p>劳务工年龄分析</p>
            </div>
          </div>
          <div class="manage_top_middle">
            <div id="container4" style="height: 90%"></div>
            <p>劳务出勤数据分析</p>
          </div>
        </div>
      </div>
    </div>
    <div class="manage_left l_left">
      <div class="manage_line1">
        <div class="manage_line2">
          <div class="manage_top_middle l_left">
            <div id="container9" style="height: 90%"></div>
            <p>当日出勤情况</p>
          </div>
          <div class="manage_top_middle l_left">
            <div id="container10" style="height: 90%"></div>
            <p>劳务出勤统计</p>
          </div>
          <div class="manage_top_middle l_left">
            <div id="container11" style="height: 90%"></div>
            <p>劳务出勤分析</p>
          </div>
        </div>
      </div>
    </div>
    <div class="manage_left l_left">
      <div class="manage_line1">
        <div class="manage_line2">
          <div class="manage_top_middle">
            <div id="container12" style="height: 90%"></div>
            <p>班组出勤排行</p>
          </div>
          <div class="manage_top_middle">
            <div id="container6" style="height: 90%"></div>
            <p>班组出勤分析</p>
          </div>
          <div class="manage_top_middle l_left">
            <div id="container5" style="height: 90%"></div>
            <p>班组人数与出勤情况</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {}
    }
  }
</script>

<style lang="scss" scoped>

  @import "~@/assets/screen/screen2/scss/common.scss";

  .manage_left {
    width: 32.5%;
    height: 98%;
    background-color: rgba(2, 8, 23, 0.54);
    /*margin-top:3%;*/
    margin-left: 0.6%;
    border-radius: 10px;
    position: relative
  }

  .manage_line1 {
    border-radius: 10px;
    border: 1px #0174f5 solid;
    margin: 1px;
    height: 100%
  }

  .manage_line2 {
    margin: 1px;
    border-radius: 9px;
    border: 2px #0b7ff3 solid;
    height: 100%;
    padding-top: 5%
  }

  .manage_left_nav {
    position: absolute;
    top: 1px;
    width: 42%;
    height: 3.5%;
    left: 24%
  }

  .manage_left_top {
    height: 33%
  }

  .manage_top_left {
    width: 33.3%;
    height: 100%;
  }

  .l_left {
    float: left;
  }

  .manage_top_left p {
    text-align: center;
    color: #fff;
    font-size: 12px
  }

  .manage_top_middle {
    height: 33%;
    width: 100%;
  }

  .manage_top_middle p {
    text-align: center;
    color: #fff;
    font-size: 12px
  }

  .manage_top_middle thead tr {
    border: none !important;
  }

  /*.manage_top_middle{border: 1px #3490ba solid !important; }*/
  .manage_top_middle th, .manage_top_middle td, .dataAllBorder20 td {
    line-height: 32px !important;
    padding: 0 !important;
    text-align: center;
    font-size: 14px;
    -webkit-transform: scale(0.8);
    border: 1px #3490ba solid !important;
    color: #fff;
  }

  .manage_top_middle thead {
    background-color: #3490ba
  }

  .manage_top_middle td {
    line-height: 32px !important;
    color: #dedfe0
  }

  .manage_top_middle tbody tr {
    border-bottom: 1px #3490ba solid
  }

  .table-bordered {
    border: 1px #3490ba solid !important;
  }

</style>
